@charset "utf-8";

section{
    color: #444F58;
}
.content_1{
    width: 400px;
    .shoucang_1{
        img{
         transition: 500ms ease;
        margin-top: 80px;
        margin-left: 110px;
        &:hover,active{
            transform: scale(1.1);
           
          }
        }
    }
    p{
      margin-top: 60px;
      i{  vertical-align: bottom; 
          transition: 500ms ease;
          font-size: 12px;
          color: #878787;
          margin-right: 15px;
          &:hover,active{
                opacity: .8;
               
                color: red;
            }
      }
     }
   
}
//*****************************************
.content_2{
    width: 500px;
    margin-top: 25px;
    p{
        padding-bottom: 20px;
        i{
            font-size: 14px;
         &:first-of-type{
         margin-right: 50px;
         span{
             font-size: 17px;
             vertical-align: top;
         }
                   }  
      &:last-of-type{
          font-size: 16px;
          color: red;
          span{
              font-size: 19px;
              vertical-align: top;
              color: red;
          }
        }
      }
     }
     //**********************************************
    .duanluo_2{
        &>div{
            margin: 10px 0;
            &>span{
                &:first-of-type{
                    line-height: 40px;
                    display: inline-block;
                    width: 70px;
                }
            }
        }
        .deliver{
            &>span{
                &:first-of-type{
                    line-height: 40px;
                    display: inline-block;
                    width: 70px;
                }
                font-size: 14px;
                &:last-of-type{
                    margin-left: 30px;
                }
            }
            
        }
       
    }
     .duanluo_3{
         input{
             margin-right: 10px;
         }
         &>span{
             
             text-decoration:underline ;
             font-size: 13px;
             margin-left: 20px;
             a{
                 color: #444F58;
                 &:hover{
                 color: red;
             }
             }
         }
            .made{
               
                position: relative;
                    background: black;
                    border-color: black;
                    
                    img{ transition: 0.2s;
                        position: absolute;
                        top: 50%;
                        left: 10px;
                        margin-top: -11px;
                    }
                span{    transition: 0.4s;
                        display: inline-block;
                        position: absolute;
                        top: 50%;
                        left: 35px;
                        margin-top: -21px;
                        color: white;
                        
                    }
                    &:hover{
                        
                        img{
//                          left: 72px;
                           
                            transform: translateX(62px);
                        }
                        span{
//                          left: 10px;
                            
                            transform: translateX(-25px);
                        }
                    }
            }
        }
    .duanluo_4{
        span{
            width: 70px;
            margin-top: 36px;
            font-size: 13px;
          
        }
        li{
            float: left;
            margin-top: 35px;
            font-size: 12px;
            margin-right: 20px;
            display: inline-block;
            width: 100px;
            i{
                font-size: 12px;
                
            
            }
        }
    }    
    //*********************************
    .gender{
        span{
            display: inline-block;
            width: 70px;
        }
    }
    .size_1{
        span{
            &:first-of-type{
                line-height: 40px;
                width: 70px;
            }
             div{
                 cursor: pointer;
                 margin-right: 15px;
                 float: left;
                 text-align: center;
                 line-height: 40px;
                background: #FFFFFF;
                border: 1px solid #E7E7E7;
                border-radius: 3px;
                width: 60px;
                height: 40px;
                &:hover{
                    border: 2px solid #EB413D;
                }
                &:focus{
                    border: none;
                }
            }
        
        }
    }
    .quantity{
        span{
       &:first-of-type{
                line-height: 55px;
                width: 70px;
          
            }
            .text_1{
                width: 90px;
                padding-top: 5px;
                
                input{
                    float: left;                                                                                
                    width: 30px;                                                                                                                                  
                    height: 30px;
                    
                    text-align: center;
                 line-height: 30px;
                 background: white;
                 border: 1px solid #E7E7E7;
                 &[type="text"]{
                     border-left: none;
                     border-right: none;
                     
                 }
                 &:first-child{
                     border-top-left-radius: 3px;
                     border-bottom-left-radius: 3px;
                     &:hover{
                         background: #F3F3F3;
                     }
                 }
                 &:last-child{
                     border-top-right-radius: 3px;
                     border-bottom-right-radius: 3px;
                     &:hover{
                         background: #F3F3F3;
                     }
                 }
                }
            }
            }
    }
    
}
//***********************************************
.ines{
    width: 100%;
    margin-top: 40px;
    border-bottom: 1px solid #EFEFEF;
}
.content_3{
    margin-top: 30px;
    
    .neirong3{
        
        text-align: center;
         margin-top: 60px;
        .tu{transition: 500ms ease;
            margin-left: 50px;
            &:hover,active{
//              opacity: .8;
                transform: scale(1.1);
                
            }
           
            p{ transition: 500ms ease;
                margin-top: 40px;
                color: #777e83;
                &:hover,active{
//                  opacity: .8;
                    color: black;
                   
                }
            }
            span{transition: 500ms ease;
                font-size: 14px;
                color: #99999A;
                &:hover,active{
                    color: red;
                    
                }
                i{
                    font-size: 12px;
                }
            }
        }
        .fubiao{
            cursor: pointer;
            height: 212px;
            display: flex;
            align-items: center;
          i{
              font-size: 50px;
              color: #cccfd0;
              line-height: 150px;
              transition: 0.2s;
              &:hover{
                  color: white;
                  background: rgba(0,0,0,0.1);
                  
              }
          }
        }

        
        
    }
}
.column{
    margin-top: 30px;
    a{
        font-size: 16px;
        color: #444F58;
       &:hover,active{
           color: red;
       }
    }
    
}
.neirong4{
    .kongbai{
        width: 787px;
        height: 308px;
        background: #F3F3F3;
    }
    img{
        margin-left: 10px;
    }
}
.shouhou{
    background: #F8F8F8;
    ul{ display: flex;  
        width: 1000px;
        margin: 0 auto;
        margin-top: 80px;
        padding: 30px 0;
        justify-content:space-between;
      
  //display:flex 註明它是一個伸縮盒子模型。
    li{
        display: inline-block;
        img{
            margin-right: 10px;
            vertical-align: top;
        }
        span{
            line-height: 58px;
             color: #444F58;
        }
    }
    }
}
